<template>
	<view>
		<view class="btn-box">
		  <view @click="change()">
		    换 
		  </view>
		  <view @click="rain()">
		     雨
		  </view>
		  <view @click="toTransform()">
		     动画
		  </view>
		</view>
		<view :class="flag?'light':'dark'" id="container">
		  <view class="bg"></view>
		  <view class="moon-box">
		    <view class="moon"></view>
		  </view>
		  <view class="sun-box">
		    <view class="sun"></view>
		  </view>
		  <view class="sea"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				 flag:true,
			}
		},
		onLoad() {

		},
		methods: {
			change(){
			  this.flag=!this.flag
			},
			rain(){
				uni.navigateTo({
					url:'/pages/index/rain'
				})
			},
			toTransform(){
				uni.navigateTo({
					url:'/pages/index/transform'
				})
			}
		}
	}
</script>

<style scoped>
	#container {		
		height: 100vh;
	}

	.bg {		
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.sun {
		margin: 0;
		padding: 0;
		/* 绝对定位 水平垂直居中 */
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		height: 600rpx;
		background-color: orange;
		border-radius: 50%;
	}

	.moon {
		margin: 0;
		padding: 0;
		/* 绝对定位 水平垂直居中 */
		position: absolute;
		top: 50%;
		left: 50%;
		/* 计算得出月亮的位置 */
		transform: translate(calc(-50% + -160rpx), calc(-50% + -180rpx));
		width: 600rpx;
		height: 600rpx;
		/* 通过阴影绘制月亮 */
		box-shadow: 160rpx 180rpx 0 cyan;
		border-radius: 50%;
	}

	.sea {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 35%;
		/* 背景模糊制造大海的感觉 */
		backdrop-filter: blur(100rpx);
		-webkit-backdrop-filter: blur(100rpx);
		z-index: 100;
	}

	.sun,
	.moon,
	.sun-box,
	.moon-box,
	.bg {
		/* 添加动画过渡 */
		transition: all 1s ease-in-out;
	}

	.sun-box,
	.moon-box {
		/* 相对定位 */
		position: relative;
		/* 溢出隐藏 */
		overflow: hidden;
	}

	/* 白天 */
	.light .sun-box {
		height: 100%;
	}

	.light .moon-box {
		height: 0;
	}

	.light .bg {
		background-color: #ffeea2;
	}

	/* 夜晚 */
	.dark .sun-box {
		height: 0;
	}

	.dark .moon-box {
		height: 100%;
	}

	.dark .bg {
		background-color: #040720;
	}

	/* 切换按钮样式 */
	.btn-box {
		position: absolute;
		top: 5rpx;
		left: 5rpx;
		z-index: 101;
		display: flex;
		flex-direction: row;
	}

	.btn-box view {
		background: rgba(255, 255, 255, 0.7);
		color: #000;
		width: 90rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		margin: 5px;
		font-size: 14px;
		border-radius: 5px;
		cursor: pointer;
	}

	.btn-box view:hover {
		background: #fff;
	}
</style>